<template>
	<view>
		<u-navbar title="订单详情" bgColor="#3dd576" leftIconColor="#fff" titleStyle="color:#fff;" placeholder></u-navbar>
		<view class="con">
			<view class="con__bg">
				
			</view>
			<view class="con__addr">
				<image src="/static/goods/addr.png" class="con__addr__icon" mode=""></image>
				<view class="">
					<view class="con__addr__name">
						江东中路三段禾瑞源小区3栋一单元
					</view>
					<view class="con__addr__mobile">
						周晓晓 13588164646
					</view>
				</view>
			</view>
			<view class="con__sdtime">
				<image src="/static/goods/sz.png" class="con__sdtime__icon" mode=""></image>
				送达时间:2025年10月3日17:00前
			</view>
			<view class="con__goods">
				<view class="con__goods__no">
					订单消号: pcc45454555
				</view>
				<view class="con__goods__item" v-for="(item,index) in 2" :key="index">
					<image src="/static/goods/b0.png" class="con__goods__item__pic" mode="aspectFill"></image>
					<view class="">
						<view class="con__goods__item__name u-line-1">
							优赐平和老树三红蜜柚箱装2.5-3...
						</view>
						<view class="con__goods__item__price">
							16.3
						</view>
						<view class="u-flex u-flex-y-center u-flex-between" style="margin-top: 22rpx;">
							<view class="con__goods__item__num">
								数量 × 1
							</view>
							<view class="con__goods__item__price">
								19.8
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="con__f">
				<view class="con__i">
					<view class="con__i__label">
						总价
					</view>
					<view class="con__i__value">
						￥26.1
					</view>
				</view>
				<view class="con__i">
					<view class="con__i__label">
						配送费
					</view>
					<view class="con__i__value">
						￥00.0
					</view>
				</view>
				<view class="con__i">
					<view class="con__i__label">
						余额抵扣
					</view>
					<view class="con__i__value">
						-3.5
					</view>
				</view>
				<view class="con__i">
					<view class="con__i__label">
						优惠券
					</view>
					<view class="con__i__value">
						-3.0
					</view>
				</view>
				<view class="con__f__allp">
					￥22.5
				</view>
			</view>
			<view class="con__in">
				<view class="con__i">
					<view class="con__i__label">
						下单时间 
					</view>
					<view class="con__i__value v1">
						2025-09-22 18:00
					</view>
				</view>
				<view class="con__i">
					<view class="con__i__label">
						成交时间
					</view>
					<view class="con__i__value v1">
						2025-09-26 15:20
					</view>
				</view>
				<view class="con__i">
					<view class="con__i__label">
						支付方式
					</view>
					<view class="con__i__value v1">
						微信支付
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	.con{
		position: relative;
		padding: 20rpx 30rpx;
		
		&__bg{
			background-image: linear-gradient(to bottom, #3dd576, #f8f8f8);
			width: 750rpx;
			height: 200rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
		&__addr{
			position: relative;
			
			height: 139rpx;
			background: #FFFFFF;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			&__icon{
				width: 36rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
			&__name{
				font-family: PingFang;
				font-weight: bold;
				font-size: 30rpx;
				color: #232323;
				line-height: 52rpx;
			}
			&__mobile{
				font-family: PingFang;
				font-weight: 500;
				font-size: 26rpx;
				color: #6E6E6E;
				line-height: 52rpx;
			}
		}
		&__sdtime{
			position: relative;
			margin-top: 23rpx;
			height: 86rpx;
			background: #FFFFFF;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang;
			font-weight: 500;
			font-size: 26rpx;
			color: #6E6E6E;
			line-height: 26rpx;
			margin-bottom: 21rpx;
			&__icon{
				width: 31rpx;
				height: 32rpx;
				margin-right: 15rpx;
			}
		}
		&__goods{
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 36rpx 20rpx 0;
			margin-bottom: 26rpx;
			position: relative;
			&__no{
				font-family: PingFang;
				font-weight: 500;
				font-size: 25rpx;
				color: #727272;
				line-height: 25rpx;
			}
			&__item{
				padding: 30rpx 0;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid rgba(233, 234, 236, .79);
				&__pic{
					width: 139rpx;
					height: 140rpx;
					background: #0AA694;
					border-radius: 15rpx;
				}
				&__name{
					width: 496rpx;
					font-family: PingFang;
					font-weight: bold;
					font-size: 32rpx;
					color: #181818;
					line-height: 54rpx;
				}
				&__price{
					font-family: PingFang;
					font-weight: bold;
					font-size: 36rpx;
					color: #181818;
					line-height: 36rpx;
					&::before{
						content: "￥";
						font-size: 30rpx;
					}
				}
				&__num{
					font-family: PingFang;
					font-weight: 500;
					font-size: 21rpx;
					color: #919191;
					line-height: 21rpx;
				}
			}
		}
		&__f{
			background-color: #fff;
			border-radius: 20rpx;
			padding: 16rpx 20rpx 34rpx;
			&__allp{
				font-family: PingFang;
				font-weight: bold;
				font-size: 36rpx;
				color: #FD3C33;
				line-height: 36rpx;
				text-align: right;
				margin-top: 10rpx;
				&::before{
					content: "合计：";
					font-size: 26rpx;
					color: #000000;
				}
			}
		}
		&__in{
			background-color: #fff;
			border-radius: 20rpx;
			padding: 8rpx 22rpx;
			margin-top: 28rpx;
		}
		&__i{
			height: 76rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&__label{
				font-family: PingFang;
				font-weight: bold;
				font-size: 25rpx;
				color: #1E1E1E;
				line-height: 25rpx;
				opacity: 0.8;
			}
			&__value{
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 36rpx;
				color: #080808;
				line-height: 36rpx;
			}
			.v1{
				font-size: 25rpx;
			}
		}
	}
</style>